<template>
  <div class="detail-main">
    <el-dialog
      title="详情"
      :visible.sync="showDialog"
      width="70%"
      :before-close="handleClose"
      @update:showDialog="toggleDialog"
    >
      <div class="detail-main-content">
        <div class="content-left">
          <div class="content-left-top">
            <div class="content-title">总体情况</div>
            <div>IP段：{{ detail.ipAddress }}</div>
            <div>子网掩码：{{ detail.subnetMask }}</div>
            <div>业务类型：{{ detail.businessTypeToString }}</div>
            <div>办公区域：{{ detail.addressToString }}</div>
            <div>单位：{{ detail.unit }}</div>
            <div>分配：{{ detail.ipUseSize }}</div>
            <div>空闲：{{ detail.ipNoneUseSize }}</div>
          </div>
          <div class="content-left-bottom">
            <div class="content-title">统计信息</div>
            <pie-chart
              :height="'140px'"
              :xData="['空闲', '分配']"
              :yData="[
                { value: detail.ipNoneUseSize, name: '空闲' },
                { value: detail.ipUseSize, name: '分配' },
              ]"
            ></pie-chart>
          </div>
        </div>
        <div class="content-right">
          <div class="content-title" style="width: 100%">IP详情</div>
          <div
            v-for="(item, index) in detailList"
            :key="item.id"
            class="content-right-item"
            @click.prevent="handleDetail(true, item, index)"
          >
            <div class="item-number">
              {{ index+1 }}
            </div>
            <div class="item-icon">
              <i class="el-icon-user-solid" v-if="item.useFlag === '1'"></i>
            </div>
            <div
              :class="[
                item.useFlag === '1' ? 'active-mark' : 'not-active-mark',
              ]"
            ></div>
            <div
              class="ip-detail"
              v-if="ipDetailShow && index == ipDetail.index"
            >
              <i
                class="el-icon-close"
                style="float: right"
                @click.stop="handleDetail(false)"
              ></i>
              <div>IP段：{{ ipDetail.ipAddress }}</div>
              <div>子网掩码：{{ ipDetail.subnetMask }}</div>
              <div>网关：{{ ipDetail.gateway }}</div>
              <div>DNS：{{ ipDetail.dns }}</div>
              <div>单位：{{ ipDetail.unit }}</div>
              <div>使用人：{{ ipDetail.ipUser }}</div>
              <div>MAC地址：{{ ipDetail.macAddress }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <el-button type="primary" @click="submitForm()">确定</el-button>
      <el-button @click="handleClose">关闭</el-button> -->
    </el-dialog>
  </div>
</template>

<script>
import PieChart from "@/views/dashboard/PieChart.vue";
import { getIPDetailList } from "@/api/businessSupport/businessManagement.js";

export default {
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
    detail: {
      require: true,
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    PieChart,
  },
  data() {
    return {
      ipDetailShow: false,
      detailList: [],
      ipDetail: {},
    };
  },
  methods: {
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
    handleDetail(visible, item, index) {
      this.ipDetailShow = visible;
      if (!visible) return;
      this.ipDetail = item;
      this.ipDetail.index = index;
    },
    async getIPDetailList() {
      const result = await getIPDetailList({
        id: this.detail.id,
      });
      this.detailList = result.data;
    },
  },
  mounted() {
    this.getIPDetailList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 400px;
  padding: 20px;
}
.detail-main {
  color: #fff;
  &-content {
    display: flex;
    position: relative;
    height: 100%;
    .content-title {
      font-weight: 600;
    }
    .content-left {
      width: 20%;
      height: 100%;
      &-top {
        padding: 10px;
        border: 1px solid #63bff9;
      }
      &-bottom {
        border: 1px solid #63bff9;
        margin-top: 10px;
        padding: 10px;
        width: 100%;
        height: calc(100% - 184px);
      }
    }
    .content-right {
      flex: 1;
      height: 100%;
      border: 1px solid #63bff9;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      align-content: flex-start;
      gap: 10px;
      overflow: auto;
      padding: 10px;
      margin-left: 30px;
      &-item {
        flex: 0 0 auto;
        display: flex;
        justify-content: space-around;
        position: relative;
        padding: 10px;
        //  width:50px;
        border: 1px solid #63bff9;
        .item-number {
          width: 30px;
        }
        .item-icon {
          width: 15px;
        }
        .item-mark {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
        }
        .active-mark {
          @extend .item-mark;
          border-right: 15px solid #95f204;
        }
        .not-active-mark {
          @extend .item-mark;
          border-right: 15px solid #02a7f0;
        }
      }
    }
  }
  .ip-detail {
    position: absolute;
    top: 45%;
    left: 45%;
    padding: 10px;
    line-height: 20px;
    width: 200px;
    background: #04264e;
    border: 1px solid #63bff9;
    border-radius: 2px;
    font-size: 12px;
    z-index: 10000;
  }
}
</style>